<template>
  <view class="address-picker" @click="selectAddress">
    <view v-if="address" class="address-info">
      <view class="address-header">
        <text class="address-name">{{ address.name }}</text>
        <text class="address-phone">{{ address.phone }}</text>
        <text v-if="address.isDefault" class="address-default">默认</text>
      </view>
      <view class="address-detail">{{ address.province }} {{ address.city }} {{ address.district }} {{ address.detail }}</view>
    </view>
    <view v-else class="address-empty">
      <text class="address-empty__icon">📍</text>
      <text class="address-empty__text">添加收货地址</text>
    </view>
    <text class="address-arrow">›</text>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  address: {
    type: Object,
    default: null
  }
});

const emit = defineEmits(['select']);

const selectAddress = () => {
  emit('select');
};
</script>

<style lang="scss" scoped>
.address-picker {
  position: relative;
  padding: 15px 30px 15px 15px;
  display: flex;
  align-items: center;
}

.address-info {
  flex: 1;
}

.address-header {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.address-name {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.address-phone {
  font-size: 13px;
  color: #666;
}

.address-default {
  font-size: 10px;
  color: #fff;
  background-color: #07c160;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 10px;
}

.address-detail {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.address-empty {
  display: flex;
  align-items: center;
  flex: 1;
  
  &__icon {
    font-size: 18px;
    margin-right: 5px;
  }
  
  &__text {
    font-size: 14px;
    color: #333;
  }
}

.address-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #999;
}
</style>
